<template>
    <div class="profile">
        <div class="cover">
            <van-icon name="arrow-left" color="white" size="0.8rem" @click="goback()"/>
            <img :src="require(`@/assets/images/pet/dog20.jpg`)" 
              alt="" class="agency-img">
        </div>
        <div class="personal">
            <div class="mine">
                <div class="modify" @click="toMeInfo()">
                    <van-icon name="edit" />
                    <p>修改个人信息</p>
                </div>
                <div class="face" @click="updateMax()" :class="maxSize ? 'big-face' : '' ">
                     <van-image v-if="privateInfo.profile" :src="privateInfo.profile" alt="" class="face-img">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                    </van-image>
                    <img :src="require(`@/assets/images/noImg.png`)" alt="" v-else class="no-img">                                        
                      <p class="change-profile" @click="changeProfile()">
                        <van-uploader :after-read="afterRead">更改头像</van-uploader>
                      </p>
                </div>
                <div class="name">
                    <h3>{{privateInfo.uname}}
                        <p class="owner">{{privateInfo.mail}}</p>
                    </h3>                   
                    <div class="read">
                        <!-- <div class="follow">
                            <h3>0</h3>
                            <p>关注数</p>
                        </div> -->
                        <div class="follow">
                            <h3>{{agencyList.length}}</h3>
                            <p>点赞数</p>
                        </div>                       
                    </div>
                </div>               
            </div>
            <div class="adopt-record title-color">
                    <h3>收养记录</h3>
                    <div class="record-list">
                        <div class="pet" v-for="(item,index) in pet" :key="index">
                            <div class="img">
                                <img :src="item.profile"  alt="">
                            </div>
                            <div class="text">
                                <svg class="icon gender" aria-hidden="true" v-if="item.gender === 'male'">
                                    <use xlink:href="#icon-nv"></use>
                                </svg>
                                <svg class="icon gender" aria-hidden="true" v-if="item.gender === 'female'">
                                    <use xlink:href="#icon-nan"></use>
                                </svg>
                                <div class="text-content">
                                    <p class="pname">{{item.pname}}</p>
                                    <p>{{item.type}}</p>
                                </div>                                
                            </div>
                        </div>
                    </div>
            </div>
            <div class="pet-life title-color">
                    <h3>宠物动态 <van-icon name="add-o" size="0.5rem"/> </h3>
                    <div class="life-content">
                           <p v-if="!lifeContent.length" class="no-life">暂无宠物动态~</p>
                    </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getuserInfo, getOrderDetail, getAgencyInfo, uploadImg, updateProfile} from '@/api.js'
export default {
    data() {
        return{
            privateInfo :{},
            pet:[],
            lifeContent:[],
            agencyList:[],
            maxSize:false,
            imgUrl:''
        }
    },
    created() {
        this.getPrivateInfo()
        this.getOrderDetail()
        this.getAgencyInfo()        
    },
    methods:{
        //上传头像
        async afterRead(file) {
        let formDatas = new FormData()
        formDatas.append('file', file.file)
            try {
                await uploadImg(formDatas)            
            } catch (error) {
                this.imgUrl = error.url;
                 let params = {user_id:JSON.parse(localStorage.getItem('user')),profile:this.imgUrl}
                const { data } = await updateProfile(params)
                this.getPrivateInfo()
            }
        },
        //更换头像
        changeProfile(e) {
            e = window.event
            e.stopPropagation()
            console.log('更改头像')
        },
        updateMax() {
            this.maxSize = !this.maxSize
        },
        async getPrivateInfo(){
            let user = JSON.parse(localStorage.getItem('user'))
            let userInfo ={mail:user}  
            const {data} = await getuserInfo(userInfo)
            this.privateInfo = data
            },
        goback() {
            this.$router.go(-1)
        },
        //获取订单信息
        async getOrderDetail() {
            let user = JSON.parse(localStorage.getItem('user'))
            const { data } = await getOrderDetail({user_id:user})
            this.pet = data.filter((value) => {
              return value.isExist === true
            })
        },
        
        async getAgencyInfo() {
            let params = {user_id:JSON.parse(localStorage.getItem('user'))}
            await getAgencyInfo(params).then( res => {
                let agencyList = res.data
                this.agencyList = agencyList.filter((value) => {
                    return value.status === 1
                })
            })
        },
        toMeInfo(){
          this.$router.push(`/modify-info?id=${this.privateInfo.mail}`)
        }

    }
}
</script>
<style lang="less" scoped>
.profile{
    .cover{
        .van-icon {
            position: absolute;
            padding: 0.5rem 0 0 0.2rem;
        }
        overflow:hidden;
        width:100%;
        height: 6rem;
        img{
            width: 100%;
            height: auto;
        }
    }
    .personal{
        padding: 0.5rem;
        .title-color{
            color: rgb(109, 104, 104);
            .record-list{
                margin: 0.3rem 0;
                height: 2.5rem;
                display: flex;
                width: 100%;
                overflow-x: auto;             
                .pet{
                    flex-shrink: 0;
                    height: 2rem;
                    width: 4.3rem;
                    box-shadow: 2px 5px 10px 0px #656b794d;
                    border-radius: 0.2rem;
                    margin-right: 0.3rem;
                    display: flex;
                    .img{
                        height: 2rem;
                        width: 2rem;
                        border-radius: 0.2rem;
                        overflow: hidden;
                        img{
                            height: 100%;
                        }
                    }
                    .text{
                        position: relative;
                        flex: 1;
                        padding:0.1rem;
                        .gender{
                            width: 0.5rem;
                            position: absolute;
                            right: 0.1rem;
                            top: 0;
                        }
                        .text-content{
                            margin-top: 0.6rem;
                            p{
                                margin-top: 0.2rem;
                            }
                            .pname{
                                color: black;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
        .pet-life {
            .van-icon-add-o{
                vertical-align: middle;
            }
            .life-content{
                height: 5rem;
                overflow: hidden;
                .no-life {
                    text-align:  center;
                    margin-top: 2rem;
                    font-size: 0.4rem;
                }
            }
        }
        .mine{
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            position: relative;
            .modify {
                font-size: 0.3rem;
                display: flex;
                position: absolute;
                right: 0;
                top: 0.25rem;
                color: rgb(92, 85, 85);
            }
            .face{
                border-radius: 1rem;
                height: 2rem;
                width:2rem;
                overflow:hidden;
                margin-right: 0.5rem;
                .face-img {
                    width:100%;
                    height: auto;
                }
                .change-profile{
                    color: white;
                }
            }
            .big-face{
                position: fixed;
                background: black;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                border-radius: 0;
                z-index: 1111;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                .face-img{
                    width: 100%;
                    height: 10rem;
                }
                .change-profile{
                    margin-top: 1rem;
                    background-color: #3f3e3b;
                    padding: 0.3rem 0.5rem;
                    border-radius: 0.5rem;
                    font-size: 0.4rem;
                }
            }
        }
        .name{
            height: 1.7rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .owner{
                font-size: 0.3rem;
                margin-top: 0.15rem;
                font-weight: normal;
            }
            .read{
                display: flex;
                font-size: 0.35rem;
                justify-content: space-between;
                .follow{
                    display: flex;
                    margin-right: 0.4rem;
                }
            }
        }
    }
}
</style>